<template>
	<div class="fly-box">
		<svg viewBox="0 0 200 200">
			<defs>
				<path id="fly-box-path" d="M5 5 L195 5 L195 195 L5 195 Z" fill="none"></path>
				<!-- 动画渐变效果 -->
				<radialGradient id="fly-box-gradient" r="50%" cx="50%" cy="50%" fx="100%" fy="50%">
					<stop offset="0%" stop-color="#fff" stop-opacity="1"></stop>
					<stop offset="100%" stop-color="#fff" stop-opacity="0"></stop>
				</radialGradient>
				<!-- 蒙版 -->
				<mask id="fly-box-mask">
					<!-- 0,0坐标绘制一个圆 -->
					<circle r="50" cx="0" cy="0" fill="url(#fly-box-gradient)">
						<!-- 围绕多边形做轨迹动画 -->
						<animateMotion dur="3" path="M5 5 L195 5 L195 195 L5 195 Z" rotate="auto" repeatCount="indefinite"></animateMotion>
					</circle>
				</mask>
			</defs>
			<use href="#fly-box-path" stroke-width="1" stroke="#235fa7"></use>
			<use href="#fly-box-path" stroke-width="3" stroke="#4fd2dd" mask="url(#fly-box-mask)"></use>
		</svg>
		<div class="fly-box-content">
			<slot></slot>
		</div>
	</div>
</template>

<script type="text/ecmascript-6">
export default {
  name: 'flyBox',
}
</script>

<style lang="scss" scoped>
.fly-box {
	position: relative;
	height: 100%;
	width: 100%;
	svg {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
	}
	.fly-box-content {
		height: 100%;
		width: 100%;
	}
}
</style>
